/*
 *  NavBar.js
 *  created by qinghong
 *  2016-7-11
 */

/*
 * 定制版navBar, 需给定参数  tintColor, backgroundColor,
 *                         leftIcon / leftText, leftAction (若两者都给了,leftIcon优先)
 *                         titleText / titleIcon (若两者都给了,titleText优先)
 *                         rightIcon / rightText, rightAction (若两者都给了,lrightIcon优先)
 */

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity
} from 'react-native';

import Constants from './Constants'

const BarHeight = 64;

export default class NavBar extends Component {

    leftComponent() {
        const { tintColor, leftIcon, leftText, leftAction } = this.props;
        if (leftIcon) {
            return (<TouchableOpacity style={styles.leftComponent} onPress={leftAction}>
                <Image source={leftIcon}/>
            </TouchableOpacity>);
        } else if (leftText) {
            return (<TouchableOpacity style={styles.leftComponent} onPress={leftAction}>
                <Text style={{fontSize: 16, color: tintColor || Constants.colors.tabBarTintColor}}>{leftText}</Text>
            </TouchableOpacity>);
        } else {
            return (<View style={styles.leftComponent}/>);
        }
    }

    titleComponent() {
        const { tintColor, titleText, titleIcon } = this.props;
        if (titleText) {
            return (<View style={styles.titleComponent}>
                <Text style={{fontSize: 19, color: tintColor || Constants.colors.tabBarTintColor}}>
                    {titleText}
                </Text>
            </View>);
        } else if (titleIcon) {
            return (<View style={styles.titleComponent}>
                <Image source={titleIcon}/>
            </View>);
        } else {
            return (<View style={styles.titleComponent}/>);
        }
    }

    rightComponent() {
        const { tintColor, rightIcon, rightText, rightAction } = this.props;
        if (rightIcon) {
            return (<TouchableOpacity style={styles.rightComponent} onPress={rightAction}>
                <Image source={rightIcon}/>
            </TouchableOpacity>);
        } else if (rightText) {
            return (<TouchableOpacity style={styles.rightComponent} onPress={rightAction}>
                <Text style={{fontSize: 16, color: tintColor || Constants.colors.tabBarTintColor}}>{rightText}</Text>
            </TouchableOpacity>);
        } else {
            return (<View style={styles.rightComponent}/>);
        }
    }

    render() {
        const { backgroundColor } = this.props;

        return (
            <View style={[styles.container, {backgroundColor: backgroundColor || Constants.colors.navBarBgColor}]}>
                <View style={styles.navBar}>
                    {this.leftComponent()}
                    {this.titleComponent()}
                    {this.rightComponent()}
                </View>
                <View style={styles.bottomLine}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        width: Constants.window.screenWidth,
        height: BarHeight
    },
    navBar: {
        flexDirection: 'row',
        width: Constants.window.screenWidth,
        height: BarHeight - 0.5,
        paddingTop: 24,
        paddingBottom: 4
    },
    bottomLine: {
        width: Constants.window.screenWidth,
        height: 0.5,
        backgroundColor: Constants.colors.grayLineColor
    },
    leftComponent: {
        marginLeft: 5,
        marginRight: 3,
        width: 36,
        height: 36,
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleComponent: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 36
    },
    rightComponent: {
        marginLeft: 3,
        marginRight: 5,
        width: 36,
        height: 36,
        justifyContent: 'center',
        alignItems: 'center'
    }
});


